<template>
  <div class="information">
    <div class="user-info">
      <div class=""></div>
    </div>
    <!-- <div>就诊人信息</div>
    <div>新增就诊人</div> -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="就诊人姓名"
        label="就诊人姓名"
        placeholder="就诊人姓名"
        :rules="[
          { required: true, message: '请填写就诊人姓名' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur',
          },
        ]"
      />
      <van-field
        v-model="cardType"
        name="证件类型"
        label="证件类型"
        placeholder="证件类型"
        :rules="[{ required: true, message: '请填写证件类型' }]"
      />
      <van-field
        v-model="cardNo"
        name="证件号码"
        label="证件号码"
        placeholder="证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"
      />
      <van-field
        v-model="userPhone"
        name="联系电话"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <van-field
        v-model="verificateCode"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <van-field
        v-model="relation"
        is-link
        readonly
        label="关系"
        placeholder="请选择关系"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择关系"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import "@/wxcomponents/vant/popup/index"

export default {
  name: "Information",
  data() {
    return {
      show: false,
      username: "",
      cardType: "",
      cardNo: "",
      userPhone: "",
      verificateCode: "",
      relation: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
        },
        {
          text: "江苏省",
          value: "320000",
        },
      ],
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      // this.$router.push({
      //   path: "/",
      // });
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
  },
};
</script>

<style>
</style>